<template>
    <div class="one">
   <section>
   <p @click="back">x</p>
    </section>
    <h3>登录</h3>
    <van-form @submit="onSubmit" class="login">
  <van-cell-group inset >
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"/>
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"/>
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" class="commit">
      提交
    </van-button>
    <div class="find">
    <h6>账号注册</h6>
    <span class="secret">找回密码</span>
    </div>
  </div>
</van-form>

   </div> 
</template>
<script>
import { ref } from 'vue';
export default{
    setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
   methods:{

    data(){
        return{
          text:"",//文本的信息
        }
    },
    back(){
           this.$router.back();
       },
    onSubmit(){
        this.$router.back();
    }
   }
}
</script>
<style lang="scss" scoped>
.one{
   height:100%;
   width:100%;
   position:relative;
}
section{
   width:100%;
   height:80px;
   background-color: white;
   display:flex;
 
   p{
       width:50px;
       height:30px;
       color:red;
       line-height: 80px;
       margin-left: 10px;
   }
   .wow{
       width:150px;
       height:30px;
       border-left:1px solid white;
       text-align: center;
       margin-top: 25px;
       b{
       color:white;
   }
   }
  
}
h3{
    margin-left: 30px;
    margin-top: 20px;
}
.login{
    margin-top: 20px;
}
.find{
    display:flex;
    justify-content: space-between;
    margin-top: 30px;
    h6{
        font-size: 16px;
        font-weight: normal;
    }
    .secret{
        font-size: 16px;
    }
}



</style>